<template>
  <div class="page">
    <div class="head">
      <h1>{{ $t('购买') }}</h1>
    </div>
    <div class="panel" v-if="res.monkey">
      <div class="goods">
        <div class="img">
          <img :src="res.monkey.facade" :style="{background: res.monkey.background}">
        </div>
        <span># {{ res.monkey.id }} · {{res.monkey.generation}} {{ $t('代') }} · {{ res.monkey.weight }} kg</span>
      </div>
      <box gap="20px 0" v-if="buying">
        <x-button class="btn" plain @click.native="buyConfirm">
          <p>{{ res.monkey.price }} 猴毛</p>
          <span>{{ $t('立即付款') }}</span>
        </x-button>
      </box>
      <div class="done" v-else>
        <icon class="icon" type="success" is-msg></icon>
        <p>{{$t('交易达成')}}</p>
        <div class="go">
          <p>小猴 # {{ res.monkey.id }} {{$t('属于你啦！')}}</p>
          <router-link to="/home" replace>{{$t('去查看')}}>></router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    XButton,
    Box,
    Icon,
    Qrcode,
    XDialog
  } from 'vux'
  export default {
    components: {
      XButton,
      Box,
      Icon,
      Qrcode,
      XDialog
    },
    data() {
      return {
        res: {},
        safePwd: '',
        buying: true
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.id = this.$route.query.id;
        this.initData();
      });
    },
    methods: {
      initData() {
        this.$http
          .post(`/game/v2/buyStart`,{
            id: this.id
          })
          .then(res => {
            if (res.code == 200) {
              this.res = res.result;
              if (res.result.monkey.tid == -1) {
                var that = this;
                this.$vux.toast.show({
                  text: '哎呦~你来晚了！去看看其它小猴吧~',
                  type: 'text',
                  isShowMask: true,
                  onHide() {
                    that.$router.replace('/market')
                  }
                })
              }
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      buyConfirm() {
        var that = this;
        this.$vux.confirm.show({
          title: `购买小猴 #${that.res.monkey.id}`,
          content: `
                  <p>确认以${that.res.monkey.price}猴毛的价格<strong style="color: red">购买小猴</strong> #${that.res.monkey.id}吗?</p>
                  <p style="color: red">购买成功后，小猴将不能退回哦！</p>
                  `,
          cancelText: '取消',
          confirmText: '确认购买',
          onCancel() {
            that.$vux.toast.text('已取消')
          },
          onConfirm() {
            that.buy()
          }
        })
      },
      buy() {
        var that = this;
        this.$http
          .post(`/game/v2/buyMonkey`, {
            id: this.res.monkey.tid,
            pwd: this.safePwd
          })
          .then(res => {
            if (res.code == 200) {
              this.buying = false
            } else if (res.code == 602) {
              // 账户余额不足
              this.$vux.toast.text('余额不足')
            } else if (res.code == 603) {
              // 未设置安全密码
              this.$vux.confirm.show({
                title: this.$t(`提示`),
                content: this.$t(`你还未设置安全密码！`),
                confirmText: this.$t('去设置'),
                onConfirm() {
                  that.$router.push('/mine?pwd=true')
                }
              })
            } else if (res.code == 604) {
              // 未输入安全密码
              this.safePwd = '';
              if (res.msg == this.$t('安全密码错误')) {
                this.$vux.toast.text(res.msg)
              }
              
              this.$vux.confirm.prompt(this.$t('请输入安全密码'), {
                title: this.$t('安全验证'),
                inputAttrs: {
                  type: 'password'
                },
                onConfirm(value) {
                  that.safePwd = value;
                  that.buy()
                }
              })
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .goods {
    padding: 25px 0 10px;
    text-align: center;
    border-bottom: 1px solid #dfdfdf;
    .img {
      width: 120px;
      height: 120px;
      margin: 0 auto;
      img {
        width: 100%;
        background-color: #d9f5cb;
      }
    }
    span {
      font-size: 12px;
      color: $grey;
    }
  }
  .btn {
    width: 185px;
    height: 64px;
    line-height: 1;
    border: 1px solid $green;
    p {
      font-size: 20px;
      color: $green;
    }
    span {
      font-size: 12px;
      color: $gray;
    }
  }
  .done {
    padding: 20px 12px 20px;
    text-align: center;
    .icon {
      font-size: 60px;
    }
    p {
      font-size: 14px;
      color: $grey;
    }
    span {
      display: block;
      font-size: 10px;
      color: $grey;
      word-break: break-all;
    }
    .go {
      margin-top: 10px;
      font-size: 14px;
      p {
        color: #000;
      }
      a {
        color: $link;
      }
    }
  }
</style>
